// 添加响应拦截器


// 1.获取并渲染概览数据
(async function(){
  // 获取数据(默认得到的是axios的套壳对象，因为在响应拦截的时候吧套壳对象进行了结构)
  // const{data:res}= await axios({
  //     url:'/dashboard',
  //   })
    const res= await axios({
      url:'/dashboard',
    })
    console.log( '调接口返回的数据', res);
    // 渲染概览数据
    // 解构橄榄数据
    const { overview} =res.data
    console.log(overview);
    for(let k in overview) {
      // console.log(k);
      document.querySelector(`[name=${k}]`).innerHTML = overview[k]
    }
    initYear(res.data.year)

    initsalary(res.data.salaryData)

    initGroup(res.data.groupData)

    initGender(res.data.salaryData)

    initMapChart(res.data.provinceData)
  })()
  const initMapChart = (provinceData) => {
    const myEchart = echarts.init(document.querySelector('#map'))
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]

    dataList.forEach(item => {
      const short = item.value
      const obj = provinceData.find(it => {
        return it.name.includes(short)
      })
      if (obj) {
        item.value = obj.value
      }
    })
    console.log(dataList);
    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option)
  }

const initGender = (salaryData) => {
  const myChart = echarts.init(document.querySelector('#gender'))

  const option = {
    title: [
      {
      text: '男女薪资分布',
      left: '10',
      top : '15',
      textStyle : {
        fontSize : 25
      }
    },
    {
      text: '男生',
      left: '44%',
      top : '48%',
      textStyle : {
        fontSize : 14
      }
    },
    {
      text: '女生',
      left: '44%',
      top : '88%',
      textStyle : {
        fontSize : 14
      }
    }],
    tooltip: {
      trigger: 'item'
    },
    color : ['#fda224' , '#5097ff', '#3abcfa', '#34d39a'],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['20%' , '30%'],
        center : ['50%' , '30%'],
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ]
        data : salaryData.map(item => {
          return {value : item.b_count , name : item.label}
        })
        },
      {
        name: 'Access From',
        type: 'pie',
         radius: ['20%' , '30%'],
        center : ['50%' , '71%'],
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ],
        data : salaryData.map(item => {
          return {value : item.g_count , name : item.label}
        })
      }
      
    ]
  };

  myChart.setOption(option)
}


  const initYear =(year) => {
    const myChart = echarts.init(document.querySelector('#line'))
    const option = {
      title: {
        text: '2022全学科薪资走势',
        textStyle: {
          fontSize: 16
        },
        left: 10,
        top: 10
      },
      xAxis: {
        type: 'category',
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data:year.map(item => item.month),
        // x轴颜色和虚线
        axisLine: {
          lineStyle: {
            type: 'dashed',
            color: '#ccc'
          }
        },
        // 刻度标签颜色
        axisLabel: {
          color: '999'
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        // 颜色
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#ccc'
          }
        }
      },
      // 提示框
      tooltip: {
        trigger: 'axis'
      },
      // 网格
      grid: {
        left: '10%',
        top: '20%'
      },
      // 颜色
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#499bee' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#4b78ef' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      ],
      // 系列
      series: [
        {
          // data: [820, 932, 901, 934, 1290, 1330, 1320],
          data:year.map(item => item.salary),
          type: 'line',
          // 是否平滑
          smooth: true,
          // 线的宽度
          lineStyle: {
            width: 5
          },
          // 标记 就是链接的圆圈
          symbolSize: 10,
          // 区域填充
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#93bff4' // 0% 处的颜色
                },
                {
                  offset: 0.5,
                  color: 'rgba(148, 192, 245, 0.1)' // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0.1)' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        }
      ]
    }
    
    myChart.setOption(option)
  }

  const initsalary = (data) => {
    const myChart = echarts.init(document.querySelector('#salary'))
    const option = {
      // 标题
      title:{
        text:'班级薪资分布',
        textStyle:{
          fontSize:16
        },
        left: 10,
        top:15
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '5%',
        left: 'center'
      },
      color:['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
      series: [
        {
          name: '班级薪资分布',
          type: 'pie',
          // 半径
          radius: ['50%', '65%'],
          // 圆心点
          center:['50%', '45%'],
          avoidLabelOverlap: false,
          // 每块饼的样式
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          // 饼的说明文字
          label: {
            show: false,
            position: 'center'
          },
          // 高亮的样式
          // emphasis: {
          //   label: {
          //     show: true,
          //     fontSize: 40,
          //     fontWeight: 'bold'
          //   }
          // },
          // 连接线
          labelLine: {
            show: false
          },
          // data: [
          //   { value: 1048, name: 'Search Engine' },
          //   { value: 735, name: 'Direct' },
          //   { value: 580, name: 'Email' },
          //   { value: 484, name: 'Union Ads' },
          // ]
          data:data.map(item =>{
            return {name:item.label, value:item.g_count + item.g_count}
         })
        }
      ]
    };

    myChart.setOption(option)
  }

  const initGroup =(groupData) => {
    const myChart = echarts.init(document.querySelector('#lines'))
    const option = {
      // x轴
      xAxis: {
        type: 'category',
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data:groupData[1].map(item => item.name),
        // 轴线
        axisLine: {
          lineStyle: {
            type: 'dashed',
            color: '#ccc'
          }
        },
        // 刻度标签
        axisLabel: {
          color: '#999'
        }
      },
      yAxis: {
        type: 'value',
        // 分隔线
        splitLine: {
          lineStyle: {
            color: '#ccc',
            type: 'dashed'
          }
        }
      },
      // 网格
      grid: {
        left: 70,
        top: 30,
        right: 30,
        bottom: 50
      },
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#3cd59e' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(59, 213, 157,0.2)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#4fa2ee' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(81, 163, 239,0.2)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      ],
      series: [
        {
          // data: [120, 200, 150, 80, 70, 110, 130],
          data:groupData[1].map(item => item.hope_salary),
          type: 'bar'
        },
        {
          // data: [120, 200, 150, 80, 70, 110, 130],
          data:groupData[1].map(item => item.salary),
          type: 'bar'
        }
      ]
    };
    
    myChart.setOption(option)

    const btn = document.querySelector('#btns')
    btn.addEventListener('click' , function (e) {
      if(e.target.tagName === 'BUTTON') {
        const n = e.target.innerHTML
        // console.log(n);
        // console.log(groupData[n]);
        option.xAxis.data = groupData[n].map(item => item.name)

        option.series[0].data = groupData[n].map(item => item.hope_salary)
        option.series[1].data = groupData[n].map(item => item.salary)

        myChart.setOption(option)

        btn.querySelector('.btn-blue').classList.remove('btn-blue')
        e.target.classList.add('btn-blue')

      }
    })
  }
